<template>
	<view>
		<up-sticky offset-top="0">
		<view class="money_box">
			
				可用余额：
				<up-text mode="price" bold type="error" :text="userInfo.money"></up-text>
		</view>
		</up-sticky>
		<view class="con_list" v-if="list.length>0">
			<up-cell-group>
				
				<up-cell v-for="(item,index) in list" :key="index">
					<template #title>
						<view class="">
							{{item.typeRemark}}
						</view>
						<up-text type="info" :text="item.createdAt"></up-text>
					</template>
					<template #value>
						<view class="r_box">
							
							<up-text prefixIcon="plus" iconStyle="color: red;margin-right:20rpx"  type="error" align="right" :text="item.moneyChange"></up-text>
						</view>
					</template>
				</up-cell>
			</up-cell-group>
		</view>
		<view class="loadmore" v-if="list.length>0">
			<up-loadmore :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"
				:status="status" />
		</view>
		<view v-if="list.length==0" class="empty_box">
		</view>
		<view class="tabBarBottom"></view>
	</view>
</template>


<script>
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		useStore
	} from '@/store/index.js'
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		moneyLogApi
	} from '@/api/user.js'
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				list: [],
				queryForm: {
					pageSize: 10,
					page: 1,
					status: 0,
				},
				total: 0,
				status: 'loadmore',
				loadingText: '正在加载...',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',

			})
			onLoad((option) => {
				store.getUserInfo()
				getData()

			})

			onPullDownRefresh(() => {
				state.queryForm.page = 1
				state.list.length = 0
				getData()
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			})
			//上拉加载
			onReachBottom(() => {
				let page = state.queryForm.pageSize * state.queryForm.page
				if (state.total > page) {
					state.queryForm.page++
					getData()
				} else {
					state.status = 'nomore'
				}

			})
			//获取列表数据
			const getData = async () => {
				state.status = 'loading'
				if (state.queryForm.page == 1) {
					state.list = [];
				}
				const {
					data
				} = await moneyLogApi(state.queryForm)

				uni.stopPullDownRefresh()
				state.total = data.total
				if (state.total <= state.queryForm.pageSize) {
					state.status = 'nomore'
					state.list = data.records
					return false
				}
				if (state.total > state.queryForm.pageSize) {
					setTimeout(() => {
						state.list = state.list.concat(data.records)
						state.status = 'loadmore'
					}, 1000)
				}

			}

			const ondetail = async (e) => {
				uni.navigateTo({
					url: "/subpages/wallet/detail?id=" + e.id
				})
			}
			return {
				...toRefs(state),
				ondetail
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	.container {
		min-height: 100%;
		// background: rgb(244, 244, 244);
	}

	.money_box {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		
		padding: 0 20rpx;
		display: flex;
		
		background: #fff;
	}

	.con_list {
		background: #fff;
	}

	.r_box {
		display: flex;
	}
</style>